<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="function-box">
					<view class="function-item flexWrap">
						<view class="th1">名称</view>
						<view class="th2">类型</view>
						<view class="th3">状态</view>
						<view class="th4">操作</view>
					</view>
					<view class="function-item flexWrap" v-for="(item,index) in billiardsList" :key="index">
						<view class="th1">{{item.equipment_name}}</view>
						<view class="th2" v-if="item.type==1">
							乒乓球<!-- -{{item.table_type==1?'黑八':item.table_type==2?'九球':'斯洛克'}} -->
						</view>
						<view class="th2" v-else>
							麻将
						</view>
						<view class="th3">
							<block v-if="item.order_status==0&&item.status!=3">空闲</block>
							<block v-if="item.order_status>0">使用中</block>
							<block v-if="item.status==3">维护中</block>
						</view>
						<view  class="th4" @tap="goSet(item)" :class="{grey:item.order_status>0}">编辑</view>
					</view>
				</view>
				<view class="remaks-box">
					<view>1、如需新增或者删除桌台包房，请群内联系管理员。</view>
					<view>2、使用中台桌不可编辑。</view>
				</view>
				
				<!--操作指引悬浮按钮 -->
				<guideline :path="'moduleB/manage/tableSet'"></guideline>
				<!-- <view class="bottom-box flexWrapNo">
					<view class="define-btn">提交保存</view>
				</view> -->
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				hardware_type:2,  //硬件类型  1:aqara   2:智能盒子
				billiardsList:[]
			}
		},
		onLoad(options) {
			this.getList();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			goSet(item){
				if(item.order_status>0){
					this.$tools.showToast('当前台桌状态不允许修改')
					return;
				}
				this.goPage('/moduleB/manage/editTable?id='+item.id+'&table_type='+item.table_type+'&type='+item.type)
			},
			// 获取台桌
			getList(){
				this.$tools.loadIng()
				let method=''
				if(this.hardware_type==2){
					method=this.$api.smartEquipmentList
				}else{
					method=this.$api.equipmentList
				}
				
				this.$request.post(method, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.billiardsList=data.list
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 36upx;
		.function-box{
			background: #1D1C5C;
			border-radius: 10upx;
			padding: 30upx;
			.function-item{
				font-size: 24upx;
				color: #FFFFFF;
				height: 100upx;
				line-height: 100upx;
				border-bottom: 1rpx solid #36355E;
				border-left: 1rpx solid #36355E;
				border-right: 1rpx solid #36355E;
				&:nth-of-type(1){
					border-top: 1rpx solid #36355E;
					font-weight: bold;
					font-size: 30upx;
					.th4{
						color: #FFFFFF;
					}
				}
				.th1{
					width: 180upx;
					height: 100upx;
					text-align: center;
					border-right: 1rpx solid #36355E;
					overflow-x: scroll;
				}
				.th2{
					height: 100upx;
					border-right: 1rpx solid #36355E;
					text-align: center;
					flex: 1;
				}
				.th3{
					height: 100upx;
					width: 100upx;
					text-align: center;
					border-right: 1rpx solid #36355E;
				}
				.th4{
					height: 100upx;
					width: 100upx;
					text-align: center;
					color: #26BCFD;
				}
				.grey{
					color: #82819B;
				}
			}
			.add-btn{
				font-size: 24upx;
				text-align: center;
				color: #26BCFD;
				height: 100upx;
				line-height: 100upx;
				border-bottom: 1rpx solid #36355E;
				border-left: 1rpx solid #36355E;
				border-right: 1rpx solid #36355E;
			}
		}
		.remaks-box{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #82819B;
			line-height: 50rpx;
			margin-top: 12upx;
		}
		.bottom-box{
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.define-btn{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>
